<template>
  <div class="min-h serveProject bg-wt">

    <SearchForm :searchData="pagination" @handleClear="handleClear" @handleReset="handleReset"
      @handleSearch="handleSearch"></SearchForm>

    <TableList 
    :data="data" 
    :total="total" 
    :pagination="pagination" 
    @onPageChange="onPageChange"
    @handle-bulid="handleBulid"
    @handle-edit="handleEdit"
      ></TableList>

    <DialogForm 
    ref="formRef" 
    :visible="visible" 
    :data="formData"
    :title="title" 
    @handleClose="handleClose" 
    @handleAdd="handleAdd"
    @handle-edit="handleEditForm"
    >
    </DialogForm>


  </div>
</template>

<script lang="tsx" setup>
import { ref, onMounted } from 'vue';
import { TableProps, PaginationProps, MessagePlugin } from 'tdesign-vue-next';
import { getProjectList, projectAdd,getProjectDetails,projectUpdate } from '@/api/serve';
import TableList from './components/TableList.vue'
import SearchForm from './components/SearchForm.vue'

import { number } from 'echarts';
onMounted(() => {
  console.log("页面挂载了，开始加载数据")

  getList()
});




// 定义表格的数据
const data = ref([]) //当前页的数据
const total = ref(0) //总调目

const pagination = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
}) //总调目


//获取列表数据
const getList = async () => {
  //后台已经写好按条件查询的逻辑，需要传入pageNum和pageSize
  const res = await getProjectList(pagination.value)
  console.log("返回结果：", res)
  data.value = res.data.records
  pagination.value.total = res.data.total
}




// 分页函数，是子组件要要调用的
const onPageChange: PaginationProps['onChange'] = (pageInfo) => {
  console.log('onChange:', pageInfo);
  pagination.value.pageNum = pageInfo.current
  pagination.value.pageSize = pageInfo.pageSize
  // 当每页数量或者当前页发生变化的时候，重新请求数据
  getList()

};

//重置搜索框
const handleReset = () => {
  //重置页码
  pagination.value = {
    pageNum: 1,
    pageSize: 10,
    total: 0
  }
  getList()
}

//搜索
const handleSearch = () => {
  //点击了搜索按钮之后，就需要重置页码，可能搜索后的数据不足第二页
  pagination.value.pageNum = 1
  getList()
}

//清空
const handleClear = (val) => {
  if (val === 'name') {
    // 清空名字
    delete pagination.value.name
  } else {
    // 清空状态，status==null  后台接到后，sql拼接就不会拼接status
    // 那么 就会将禁用和启用全部查出来
    delete pagination.value.status
  }
  getList()
}



// 新增

import DialogForm from './components/DialogForm.vue'

const title = ref('')
const formRef = ref(null)
//是否显示弹窗
var visible = ref(false)
//点击新增护理项目 按钮 把visible设置为true，弹出
const handleBulid = () => {
  visible.value = true;
  //没有给子组件传 新增？ 为什么子组件显示新增？
  title.value = "新增"
}
//点击弹窗中的关闭或取消，关闭弹窗
const handleClose = () => {
  visible.value = false;
}
const handleAdd = async (formdata) => {

  const res = await projectAdd(formdata)
  console.log("返回结果：", res)

  if (res.code == 200) {
    // 新增成功
    MessagePlugin.success('添加成功')
    getList()//重新加载
    handleClose() //关闭对话框
    formRef.value.handleClear()     //调用子组件的handleClear方法，调用的语法：子对象.handleClear
  } else {
    // 新增失败
    MessagePlugin.error('添加失败')

  }





  console.log("子点击了保存，父组件执行逻辑，val：", formdata)



}

// 修改之回显数据
const formData=ref({})

const handleEdit =async (val)=>{
console.log("父组收到了 子组件的row：",val)
 visible.value = true;
  title.value = "编辑"


 const res = await getProjectDetails(val.id)
  console.log("返回结果：", res)

  if (res.code == 200) {
    formData.value=res.data
  }


}

const handleEditForm = async (formdata) => {

const res = await projectUpdate(formdata)
console.log("返回结果：", res)

if (res.code == 200) {
  // 新增成功
  MessagePlugin.success('修改成功')
  getList()//重新加载
  handleClose() //关闭对话框
  formRef.value.handleClear()     //调用子组件的handleClear方法，调用的语法：子对象.handleClear
} else {
  // 新增失败
  MessagePlugin.error('修改失败')

}





console.log("子点击了保存，父组件执行逻辑，val：", formdata)



}


</script>
